<template>
  <Panel id="course-abstract"><!-- 课程简介部分 -->
    <div slot="title">{{course.name}}</div>
    <div id="course-abstract-info" class="current-row obj">
      <Card :bordered="true" dis-hover class="card">
        <p class="title"><Icon type="ios-book" /> &nbsp;{{$t('m.CourseDescription')}}</p>
        <hr>
        <p class="content" v-html=course.description></p>
      </Card>
      <Card :bordered="true" dis-hover class="card">
        <p class="title"><Icon type="android-locate"></Icon>&nbsp;{{$t('m.CourseGoal')}}</p>
        <hr>
        <p class="content" v-html=course.goal></p>
      </Card>
      <Card :bordered="true" dis-hover class="card">
        <p class="title"><Icon type="ios-list"></Icon>&nbsp;{{$t('m.CourseContent')}}</p>
        <hr>
        <p class="content" v-html=course.content></p>
      </Card>
      <Card :bordered="true" dis-hover class="card">
        <p class="title"><Icon type="social-buffer"></Icon>&nbsp;{{$t('m.CourseReferences')}}</p>
        <hr>
        <p class="content" v-html=course.references></p>
      </Card>
    </div>
  </Panel>
</template>
<script>
  import api from '@oj/api'
  export default {
    data () {
      return {
        course: {
          name: 'Test Data',
          description: 'Test Description',
          goal: 'Test Goal',
          content: 'Test Content',
          references: 'Test references'
        }
      }
    },
    mounted () {
      api.getCourse(this.$route.params.courseId).then(res => {
        this.course = res.data.data
      })
    }
  }
</script>

<style scoped>
#course-abstract-info {
  padding-left: 2%;
  margin: -10px 0 0 0;
}

#course-abstract-info .title {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 10px;
}

#course-abstract-info .content {
  border-radius: 4px;
  font-size: 14px;
  line-height: 2;
  margin-top: 1%;
}
img{
  width:350px;
  height:230px;
  margin: 0 0 0 -9px;
  padding: 10px;
}
.card{
  margin: 5px 15px 15px 0;
  padding: 5px 15px;
}
hr {
  border:none;
  height: 1px;
  background-color: #eaeaec;
}
</style>
